<template>
	<div
		style="
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-top: 15vh;
		"
	>
		<div style="display: flex; align-items: center">
			<div
				style="
					margin-right: 12vw;
					display: flex;
					flex-direction: column;
				"
			>
				<div style="margin-bottom: 1vh">
					<el-text tag="del">原签名</el-text>
				</div>
				<el-input
					v-model="oldNotes"
					style="width: 240px"
					disabled
					:rows="3"
					type="textarea"
					:placeholder="oldNotes"
				/>
			</div>
			<div style="display: flex; flex-direction: column">
				<div style="margin-bottom: 1vh">
					<el-text tag="del">想个好听点的签名吧</el-text>
				</div>
				<el-input
					v-model="notes"
					style="width: 240px"
					maxlength="50"
					placeholder="请输入"
					show-word-limit
					:rows="3"
					type="textarea"
				/>
			</div>
			<div>
				<div style="margin-bottom: 2.5vh"></div>
				<el-text type="danger" size="small"
					>签名要小于50个字符哦</el-text
				>
			</div>
		</div>
		<el-row style="margin-top: 25vh">
			<el-col :span="24">
				<el-button
					type="success"
					size="large"
					style="width: 100%"
					@click="submitNotes"
					>上传至服务器</el-button
				>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import axios from 'axios';
import { onBeforeMount } from 'vue';
import { user } from '../store/user.js';

const userStore = user();

const notes = ref('');
let oldNotes = ref('');
let username = localStorage.getItem('username');

onBeforeMount(async () => {
	const userData = await userStore.getSpecifyUserMsg(username);
	if (userData.notes) {
		oldNotes.value = userData.notes;
	} else {
		oldNotes.value = '这个人很懒...';
	}
});

const submitNotes = async () => {
	if (notes.value) {
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/updateUserSign',
				method: 'post',
				data: {
					username,
					notes: notes.value,
				},
			});
			if (res.data.state === 'ok') {
				ElNotification({
					title: 'Success',
					message: '修改个性签名成功！',
					type: 'success',
				});
				return location.reload();
			} else {
				ElNotification({
					title: 'Error',
					message: '修改个性签名失败，请检查本地网络',
					type: 'error',
				});
				return location.reload();
			}
		} catch (error) {
			console.log(error);
			ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
			return location.reload();
		}
	} else {
		return ElNotification({
			title: 'Warning',
			message: '您还没有输入',
			type: 'warning',
		});
	}
};
</script>

<style scoped></style>
